<template>
    <rui-page :defines="defines"  @finished="pageInitFinishEd">
        <Collapse accordion v-model="open">
            <Panel name="query1">
                查询展示（基本使用与form相似）
                <div slot="content">
                    <p>
                        查询属性：
                        <br>&nbsp;labelWidth: 表单label 宽度 默认150
                        <br>&nbsp;query :函数 参数为查询 表单值
                        <br>&nbsp;queryRows: 查询配置项 Array 必须配置
                        <br>    queryRows 中json配置说明：
                        <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;defineId：对应与page组件中 defines 属性中的一个字段定义组
                        <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fields：字段列表，数组型，必须配置
                        <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;slots：插槽配置 数组 对象为{key:'','slotName'} key 为字段key slotName 为slot 名

                        <br>&nbsp;moreRows: 更多查询项 Array 可不配
                        <br>    moreRows 中json配置说明：
                        <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;defineId：对应与page组件中 defines 属性中的一个字段定义组
                        <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;fields：字段列表，数组型，必须配置
                        <br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;slots：插槽配置 数组 对象为{key:'','slotName'} key 为字段key slotName 为slot 名
                    </p>
                    <p>
                        查询方法：
                        <br>updateFormData: 设置数据，参数 data
                        <br>setAllFieldRequired: 设置所有字段必输，参数 required 布尔值 true 必输，false 非必输
                        <br>setAllFieldReadOnly: 设置所有字段只读，参数 required 布尔值 true 只读，false 非只读
                        <br>setFieldRequired: 设置单个字段必输，参数 key 字段key，required 布尔值 true 必输，false 非必输
                        <br>setFieldReadOnly: 设置单个字段只读，参数 key 字段key，required 布尔值 true 只读，false 非只读
                        <br>setFiledHide: 设置单个字段隐藏 ，参数 key 字段key，required 布尔值 true 隐藏，false 显示
                        <br>setFiledValue: 设置单个字段值 参数 key 字段key，value 字段值 类型必须与设定类型匹配
                    </p>
                    <p>
                        表单事件：
                        <br>beforeChange: 数值改变前触发，返回boolean 值,返回false 阻止改变，返回true接受改变 参数 key--改变字段key,berforeValue--改变前的值,afterValue--改变后的值
                        <br>afterChange: 字段值改变后触发，无返回值，参数 key--改变字段key，afterValue--改变后的值

                    </p>
                    <br>
                    <rui-query :label-width="120"
                               ref="demoquery"
                               width="850px"
                               :query="queryData"
                               :query-rows="demoQueryRows"
                               :more-rows="demoMoreRows">
                        <template slot="slotdemo" slot-scope="{ key,item,data,dataDic }">
                            <span style="line-height: 32px">
                                <Cascader style="width: 200px"  :data="locationData" v-model="data[key]"></Cascader>
                            </span>
                        </template>
                    </rui-query>
                </div>
            </Panel>
            <Panel name="form1" >
                表单展示
                <div slot="content">
                    <p>
                        表单属性：
                        <br>labelWidth: 表单label 宽度 默认150
                        <br>readOnly: 表单是否只读 默认 false
                        <br>formOptions: 表单配置选项，数组，必输,其中组按照配置先后顺序依次展示，然后组中 grids 按照配置顺序从左至右展示,
                        <br>formOptions 配置说明：
                        <br>&nbsp;&nbsp;&nbsp;isGroup:是否为该组是否可折叠 布尔型
                        <br>&nbsp;&nbsp;&nbsp;groupName:组名称 字符串
                        <br>&nbsp;&nbsp;&nbsp;grids:组中网格 数组
                        <br> hideKey: 数组，非必输，选然后不显示的字段
                        <br> grids配置说明：
                        <br> &nbsp;&nbsp;&nbsp;defineId：对应与page组件中 defines 属性中的一个字段定义组
                        <br> &nbsp;&nbsp;&nbsp;span：列宽度,Number，满宽度为24
                        <br> &nbsp;&nbsp;&nbsp;fields：字段列表，数组型，不配置展示所有字段
                        <br> &nbsp;&nbsp;&nbsp;slots：插槽配置 数组 对象为{key:'','slotName'} key 为字段key slotName 为slot 名
                        <br> &nbsp;&nbsp;&nbsp;readOnlyKeys：只读字段名 数组 初始化后设置为 只读字段的 key数组
                    </p>
                    <p>
                        表单方法：
                        <br>updateFormData: 设置数据，参数 data
                        <br>setAllFieldRequired: 设置所有字段必输，参数 required 布尔值 true 必输，false 非必输
                        <br>setAllFieldReadOnly: 设置所有字段只读，参数 required 布尔值 true 只读，false 非只读
                        <br>setFieldRequired: 设置单个字段必输，参数 key 字段key，required 布尔值 true 必输，false 非必输
                        <br>setFieldReadOnly: 设置单个字段只读，参数 key 字段key，required 布尔值 true 只读，false 非只读
                        <br>setFiledHide: 设置单个字段隐藏 ，参数 key 字段key，required 布尔值 true 隐藏，false 显示
                        <br>resetFrom: 重置表单 无参
                        <br>setFiledValue: 设置单个字段值 参数 key 字段key，value 字段值 类型必须与设定类型匹配
                        <br>getForm: 获取iview 原始 from
                        <br>getFormData: 获取表单数据

                        <span style="color:red">注意:返回的是clone 对象不是原始值，updateFormData，更新值</span>
                    </p>
                    <p>
                        表单事件：
                        <br>beforeChange: 数值改变前触发，返回boolean 值,返回false 阻止改变，返回true接受改变 参数 key--改变字段key,berforeValue--改变前的值,afterValue--改变后的值
                        <br>afterChange: 字段值改变后触发，无返回值，参数 key--改变字段key，afterValue--改变后的值

                    </p>
                    <br>
                    <Row>
                        <Button @click="remoteFromData()">加载数据</Button>
                        <Button @click="resetFromData()">清空数据</Button>
                        <Button @click="setAllRequired(true)">全必输</Button>
                        <Button @click="setAllRequired(false)">全非必输</Button>
                        <Button @click="setAllFieldReadOnly(true)">全只读</Button>
                        <Button @click="setAllFieldReadOnly(false)">全非只读</Button>
                        <Button @click="getFormData()">获取表单数据(console查看)</Button>
                        <Button @click="submitForm()">提交表单(console查看)</Button>
                        <Button @click="setFiledValue('currency',10)">设置currency值为10</Button>
                        <Button @click="setFiledHide('currency',true)">隐藏currency</Button>
                        <Button @click="setFiledHide('currency',false)">显示currency</Button>

                        <Button @click="handleChange('require',true)">设置currency必输</Button>
                        <Button @click="handleChange('require',false)">设置currency非必输</Button>

                        <Button @click="handleChange('readOnly',true)">设置currency只读</Button>
                        <Button @click="handleChange('readOnly',false)">设置currency非只读</Button>
                    </Row>
                    <rui-form :before-change="beforeChange"
                              :form-options="demoFormOptions"
                              :label-width="120"
                              :read-only="false"
                              width="900px"
                              :after-change="afterChange"
                              ref="demoForm">
                        <template  slot="slotdemo" slot-scope="{ key,item,data,dataDic }">
                            <Cascader  :data="locationData" v-model="data[key]"></Cascader>
                            数据字典:{{dataDic}}
                            key:{{key}}
                        </template>
                    </rui-form>
                </div>
            </Panel>
            <Panel name="table1"  >
                表格展示
                <div slot="content">
                    <p>
                        表格组件属性：
                        <br>defineId: 对应与page组件中 defines 属性中的一个字段定义组
                        <br>columns: 要展示的列，如不输入则展示所有列
                        <br>refQuery:与表格关联的query组件 sring 类型
                        <br>select: 是否显示选择列，默认true
                        <br>showIndex: 是否显示列表序号 默认 true
                        <br>fixedRight: 固定在表格左边的字段列表
                        <br>fixedLeft: 固定在表格右边的字段列表
                        <br>slots: 插槽列表 其中 key 代表列，slot 代表插槽名 插槽中可用参数为，row,index,dataDic-->该列对应数据字典
                        <br>width: 表格宽度
                        <br>maxHeight: 最大高度
                        <br>pageAble: 是否显示分页 默认true
                        <br>pageSizeOpts: 分页条数列表 默认[10,20,50,100]
                    </p>
                    <p>
                        表格组件事件（支持所有iview table事件）：
                        <br>loadDatas: 加载数据，如有 refQuery且refQuery 存在则参数为 query组件表单值 否则有两个参数 pageNumber--当前页码, pageSize--每页大小

                    </p>
                    <p>
                        表格方法：
                        <br>updateTableData: 设置数据，有两个参数 records---表格数据, total--总记录数
                        <br>reloadData: 重新加载当前页数据数据，无参
                        <br>getCurrentData: 获得当前选中行数据，无参
                        <span style="color:red">注意:返回的是clone 对象不是原始值，修改后需调用updateCurrentData，更新值</span>
                        <br>updateCurrentData: 更新当前选中行数据，参数 data--要更新的数据
                        <br>resetData: 重新加载第一页数据数据，无参
                        <br>getTable: 获取iviewTable原始对象，无参
                        <br>getDicData: 获取对应字段的数据字典，key--字段配置key
                    </p>
                    <br>
                    <Row>

                    </Row>
                    <rui-table :defineId="'defineDemo'"
                               :fixedLeft="['currency','number']"
                               :fixedRight="['action']"
                               :showIndex="false"
                               :slots="[{key:'action',slot:'action'},{key:'multipleSelect',slot:'multipleSelect'}]"
                               @loadDatas="remoteTableDatas"
                               @on-selection-change="changeSelect"
                               ref-query="demoquery"
                               ref="defineDemoTable">
                        <template slot="toolBar">
                            <Button @click="remoteTableDatas()">加载数据</Button>
                            <Button @click="selectAll(true)">全选</Button>
                            <Button @click="selectAll(false)">取消全选</Button>
                        </template>
                        <template slot="action" slot-scope="{ row }">
                            <div>
                                <Button @click="remove(row)" size="small" type="error">删除</Button>
                            </div>
                        </template>
                        <template slot="multipleSelect" slot-scope="{ row,dataDic }">
                            {{dataDic}}
                        </template>
                    </rui-table>
                </div>
            </Panel>
        </Collapse>
    </rui-page>
</template>

<script>
    import defineDemo from "./defines/table-form-demo-define";
    import {loadTableData} from './table-form-api'

    export default {
        name: "table-form-demo",
        data() {
            return {
                defines:[],
                open: 'query1',
                locationData: [{
                    value: 'beijing',
                    label: '北京',
                    children: [{value: 'gugong', label: '故宫'}, {value: 'tiantan', label: '天坛'}, {
                        value: 'wangfujing',
                        label: '王府井'
                    }]
                }, {
                    value: 'jiangsu',
                    label: '江苏',
                    children: [{
                        value: 'nanjing',
                        label: '南京',
                        children: [{value: 'fuzimiao', label: '夫子庙',}]
                    }, {
                        value: 'suzhou',
                        label: '苏州',
                        children: [{value: 'zhuozhengyuan', label: '拙政园',}, {value: 'shizilin', label: '狮子林',}]
                    }],
                }],
                demoQueryRows:[
                    {
                        defineId: 'defineDemo',
                        fields:['email', 'tel', 'multipleSelect']
                    },
                    {
                        defineId: 'defineDemo',
                        fields:['currency', 'number','dateRange']
                    }
                ],
                demoMoreRows:[
                    {
                        defineId: 'defineDemo',
                        fields:['slot'],
                        slots: [{key: 'slot', slotName: 'slotdemo'}]
                    },
                    {
                        defineId: 'defineDemo',
                        fields:['time', 'timeRange', 'text']
                    },
                    {
                        defineId: 'defineDemo',
                        fields:['singleSelect', 'checkbox']
                    }
                ],
                demoFormOptions: [
                    {
                        isGroup: false,
                        grids: [
                            {defineId: 'defineDemo', span: 8, fields: ['time', 'timeRange']},
                            {defineId: 'defineDemo', span: 8, fields: ['singleSelect', 'multipleSelect']},
                            {defineId: 'defineDemo', span: 8, fields: ['number', 'currency']},
                        ],
                        hideKey: ['currency']
                    },
                    {
                        isGroup: true,
                        groupName: 'slot样例',
                        grids: [
                            {
                                defineId: 'defineDemo',
                                span: 12,
                                fields: ['slot'],
                                slots: [{key: 'slot', slotName: 'slotdemo'}]
                            },
                        ]
                    },
                    {
                        isGroup: true,
                        groupName: '设置只读',
                        grids: [
                            {
                                defineId: 'defineDemo',
                                span: 12,
                                fields: ['text', 'password', 'textarea', 'url'],
                                readOnlyKeys: ['text', 'url']
                            },
                        ]
                    },
                    {
                        isGroup: true,
                        groupName: 'demo组',
                        grids: [
                            {defineId: 'defineDemo', span: 12, fields: ['email', 'tel', 'radio', 'checkbox']},
                            {
                                defineId: 'defineDemo',
                                span: 12,
                                fields: ['date', 'dateRange', 'datetime', 'datetimeRange']
                            },
                        ]
                    },
                ]
            };
        },
        methods: {
            handleSearch() {
                this.$refs.logManagerTable.reloadData();
            },
            remoteTableDatas(queryInfo) {
                console.log(queryInfo)
                loadTableData().then(res => {
                    if (res.code === "0000") {
                        let {records, total} = res.data;
                        this.$refs.defineDemoTable.updateTableData(records, total);
                    }
                });
            },
            remoteFromData() {
                loadTableData().then(res => {
                    if (res.code === "0000") {
                        let {records} = res.data;
                        this.$refs.demoForm.updateFormData(records[0]);
                    }
                });
            },
            resetFromData() {
                this.$refs.demoForm.resetFrom();
            },
            setAllRequired(b) {
                this.$refs.demoForm.setAllFieldRequired(b);
            },
            setAllFieldReadOnly(b) {
                this.$refs.demoForm.setAllFieldReadOnly(b);
            },
            setFiledHide(field, value) {
                this.$refs.demoForm.setFiledHide(field, value);
            },
            getFormData() {
                console.log(this.$refs.demoForm.getFormData())
            },
            submitForm() {
                this.$refs.demoForm.getForm().validate((valid) => {
                    if (valid) {
                        console.log('校验表单通过 提交数据')
                        this.getFormData()
                    } else {
                        console.log('校验表单失败')
                    }
                })
            },
            setFiledValue(field, value) {
                this.$refs.demoForm.setFiledValue(field, value);
            },
            changeSelect(e) {
                console.log(e);
            },
            selectAll(e) {
                this.$refs.defineDemoTable.getTable().selectAll(e);
            },
            handleChange(type, b) {
                if ('require' === type) {
                    this.$refs.demoForm.setFieldRequired('currency', b)
                } else {
                    this.$refs.demoForm.setFieldReadOnly('currency', b)
                }
            },
            beforeChange(key,oldvalue, newValue) {
                // console.group(key+': 改变',[oldvalue,newValue])
                // console.groupEnd()
                if(key=='tel') {
                    return false;
                }else{
                    return  true;
                }
            },
            afterChange(key, newValue) {
                // console.group(key+': 改变',[newValue])
                // console.groupEnd()
            },
            remove(row){
                // console.group(': 删除',[row])
                // console.log(this.$refs.defineDemoTable.getCurrentData())
                // console.groupEnd()
            },
            queryData(queryData){
                console.log(queryData);
            },
            pageInitFinishEd(ids){
                console.log("init finished fro"+ids.join(','));
                console.log('page defines=>',this.defines)
                this.defines.push({
                    id: 'otherDemoDefine',
                    fields:defineDemo
                });
            }
        },
        created() {
            console.log(this.defines)
            this.defines.push({
                id: 'defineDemo',
                fields: defineDemo
            });
        }
        // ,
        // mounted() {
        //     this.defines.push({
        //         id: 'defineDemo',
        //         fields: defineDemo
        //     });
        // }
    };
</script>
